<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./src/css/detail.css">
    <link rel="stylesheet" href="./src/iconfont/iconfont.css">
    <script src="./src/js/jquery.min.js"></script>
    <script src="./src/js/detail.js"></script>
</head>

<body>
    <!-- 登陆注/册导航/购物车 -->
    <div class="tl">
        <div class="info bx">
            <div class="txt fs14">正品保证,免息分期</div>
            <div class="infos">
                <ul class="fs14">
                    <li><a href="#">请登录</a></li>
                    <li><a href="#">注册即送3500元大礼包</a></li>
                    <li>|</li>
                    <li><a href="#">购物车</a></li>
                    <li><a href="#">客户服务</a></li>
                    <li><a href="#">会员福利</a></li>
                    <li>|</li>
                    <li><a href="#">ENGLISH</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 搜索 -->
    <div class="search bx">
        <div class="sea1">
            <img src="./src/image/deailImg/logo-icon.png" alt="">
        </div>
        <div class="sea2">
            <div>
                <div>欧米茄OMEGA</div>
                <div class="txt">自营</div>
            </div>
            <div>
                <div>销量35741</div>
                <div> 粉丝32860</div>
            </div>
        </div>
        <div class="sea3">
            <input type="text" placeholder="搜索 品牌/系列/型号">
            <div>搜万表</div>
            <div>搜本店</div>
        </div>
    </div>

    <!-- nav -->
    <div class="nav bx">
        <div class="nav_img">
            <img src="./src/image/deailImg/8aea55a787c44732bf58e0401297be95.jpg" alt="">
        </div>
    </div>
    <div class="outer">
        <div class="nav_1 bx">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">商品</a></li>
                <li><a href="#">飞碟系列</a></li>
                <li><a href="#">星座系列</a></li>
                <li><a href="#">海马系列</a></li>
                <li><a href="#">超霸系列</a></li>
                <li><a href="#">尊霸系列</a></li>
            </ul>
            <div>
                联系商家
            </div>
        </div>
    </div>
    <div class="outer1">
        <div class="bx inner">
            <p>首页 > 欧米茄 > 欧米茄Omega-海马系列 210.32.42.20.03.001 自动机械男表</p>
            <p><span>自营</span> 欧米茄OMEGA + 关注</p>
        </div>
    </div>

    <!-- 放大镜 -->
    <div class="bx fdj">
        <div class="left">
            <!-- <div class="bigbig">
                <img src="./src/image/deailImg/resize_m_pad_w_1000_h_1000_color_ffffff.jpg" alt="">
            </div> -->
            <div class="bigbox">
                <!-- <img src="./src/image/deailImg/resize_m_pad_w_480_h_480_color_ffffff(4)1.jpg" alt=""> -->
                <img src="src/image/deailImg/resize_m_pad_w_480_h_480_color_ffffff.jpg" alt="">
            </div>
            <div class="smallbox">
                <div class="arrow_left">&lt;</div>
                <div class="box">
                    <ul class="scrolla">
                        <li class="666">
                            <img src="src/image/deailImg/resize_m_pad_w_480_h_480_color_ffffff.jpg" alt="">
                        </li>
                        <li>
                            <img src="src/image/deailImg/resize_m_pad_w_480_h_480_color_ffffff (1).jpg" alt="">
                        </li>
                        <li>
                            <img src="src/image/deailImg/resize_m_pad_w_480_h_480_color_ffffff (4).jpg" alt="">
                        </li>
                        <li>
                            <img src="src/image/deailImg/resize_m_pad_w_480_h_480_color_ffffff (3).jpg" alt="">
                        </li>
                        <li>
                            <img src="src/image/deailImg/resize_m_pad_w_480_h_480_color_ffffff (4).jpg" alt="">
                        </li>
                        <li>
                            <img src="src/image/deailImg/resize_m_pad_w_480_h_480_color_ffffff (5).jpg" alt="">
                        </li>
                        <li>
                            <img src="src/image/deailImg/resize_m_pad_w_480_h_480_color_ffffff (5).jpg" alt="">
                        </li>
                    </ul>
                </div>
                <div class="arrow_right">&gt;</div>
            </div>
            <ol class="sc">
                <li><span>收藏</span></li>
                <li>|</li>
                <li><span>分享</span></li>
            </ol>
        </div>
        <div class="right">
            <div class="line1">
                <h3>欧米茄Omega-海马系列 210.32.42.20.03.001 自动机械男表</h3>
                <div>正规发票 支持验货 海马300米潜水 2018
                    <span>咨询优惠>></span>
                </div>
            </div>
            <div class="line2">
                <ul>
                    <li>型号:</li>
                    <li>210.32.42.20.03.001</li>
                </ul>
                <ul>
                    <li>编号:</li>
                    <li>75302</li>
                </ul>
                <ul>
                    <li>品牌:</li>
                    <li>欧米茄</li>
                </ul>
                <ul>
                    <li>销量:</li>
                    <li>94</li>
                </ul>
            </div>
            <div class="line3">
                <div class="num1">
                    <span class="txt">分期</span>
                    <div>
                        <em>¥</em>
                        <i>3266.67</i>
                        <strong>x12</strong>
                        <div></div>
                        <span>免息免手续费</span>
                    </div>
                </div>
                <div class="num2">
                    <span class="txt">市场价</span>
                    <div>
                        <i>¥39200</i>
                    </div>
                </div>
                <div class="num3">
                    <span class="txt">领劵</span>
                    <div>
                        <i>¥100 自营新表现金券</i>
                    </div>
                    <em>更多</em>
                </div>
                <div class="num4">
                    <span class="txt">促销</span>
                    <div>
                        <i>[满减]</i>
                        <em>欧米茄每满500减75元!</em>
                    </div>
                </div>
            </div>
            <ul class="line4">
                <li class="a">配送</li>
                <li>(顺丰包邮)</li>
                <li>预计7-10个工作日内发货</li>
            </ul>
            <ul class="line5">
                <li class="a">承诺</li>
                <li>正品保障</li>
                <li>正规发票</li>
                <li>假一赔三</li>
                <li>7天退换</li>
                <li>全球联保</li>
            </ul>
            <ul class="line6">
                <li class="a">服务</li>
                <li>万表名匠提供全国联保 <span></span></li>
                <li>100%正品二手表库 <span></span></li>
            </ul>
            <div class="line7">
                <div class="a">款式</div>
                <ul class="6fei">
                    <li>
                        <img src="./src/image/deailImg/resize_w_50_h_50 (2).jpg" alt="">
                        <span>橡胶 黑色</span>
                    </li>
                    <li>
                        <img src="./src/image/deailImg/resize_w_50_h_50 (3).jpg" alt="">
                        <span>橡胶 蓝色</span>
                    </li>
                    <li>
                        <img src="./src/image/deailImg/resize_w_50_h_50 (4).jpg" alt="">
                        <span>橡胶 蓝色</span>
                    </li>
                    <li>
                        <img src="./src/image/deailImg/resize_w_50_h_50 (5).jpg" alt="">
                        <span>橡胶 蓝色</span>
                    </li>
                    <li>
                        <img src="./src/image/deailImg/resize_w_50_h_50 (5).jpg" alt="">
                        <span>灰色 精钢</span>
                    </li>
                    <li>
                        <img src="./src/image/deailImg/resize_w_50_h_50 (5).jpg" alt="">
                        <span>蓝色 精钢</span>
                    </li>
                </ul>
            </div>
            <div class="line8">
                <span class="a">数量</span>
                <div class="jian">-</div>
                <input type="text" value="1" id="math6">
                <div class="jia">+</div>
            </div>
            <div class="line9">
                <div class='buy'><a href="./shoppingCart.html">立即购买</a></div>
                <div class="gogo">加入购物车</div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="bottom bx">
        <div class="left_bl">
            <img src="./src/image/deailImg/bottomL_03.jpg" alt="">
        </div>
        <div class="right_bl">
            <ul>
                <li>商品详情</li>
                <li>规格参数</li>
                <li>售后服务</li>
                <li>线下体验</li>
                <li>评价(30)</li>
            </ul>
            <ol>
                <li>
                    <img src="./src/image/deailImg/0001.png" alt="">
                </li>
                <li>
                    <img src="./src/image/deailImg/0002.png" alt="">
                </li>
                <li>
                    <img src="./src/image/deailImg/0003.png" alt="">
                </li>
                <li>
                    <img src="./src/image/deailImg/0004.png" alt="">
                </li>
                <li>
                    <div id="txt6">
                        <textarea name="content" placeholder="商品评论"></textarea>
                    </div>
                    <div class="fengle">
                        <div>请为该商品打分</div>
                        <dl id="star">
                            <dt>☆</dt>
                            <dt>☆</dt>
                            <dt>☆</dt>
                            <dt>☆</dt>
                            <dt>☆</dt>
                        </dl>
                        <button id="btn">发表</button>
                    </div>
                    <ol id="info8">
                    </ol>
                </li>
            </ol>
        </div>
    </div>

    <!-- 右下角的增加功能 -->
    <ul class="rightBottom">
        <li class="iconfont icon-Shoppingcartfinancebusiness">
            <span class="fs14">购物车</span>
        </li>
        <li class="iconfont icon-heart">
            <span class="fs14">我的收藏</span>
        </li>
        <li class="iconfont icon-time">
            <span class="fs14">浏览足迹</span>
        </li>
        <li class="iconfont icon-ico">

        </li>
        <li class="iconfont icon-arrowup">
            <span class="fs14">返回顶部</span>
        </li>
    </ul>

    <!-- 购物车 -->
    <div class="shopping">
        <div class="line1"><span class="fs20">购物车</span><span class="fs20 del">X</span></div>
        <div class="line2"><span class="fs12">登陆之后显示您之前添加的商品</span><span class="fs12"><a href="#">现在登录</a></span></div>
        <div class="line3">
            <!-- <div class="iconfont icon-Shoppingcartfinancebusiness"></div>
            <p>快去挑选你心仪的商品吧</p> -->
            <ul class="moveAdd"></ul>
        </div>
    </div>
</body>

</html>
<script>
    $(function () {
        // 加减效果
        let num = $('#math6').val();
        $('.line8>.jian').on('click', function () {
            num = $('#math6').val();
            num--
            if (num <= 1) {
                num = 1;
            }
            $('#math6').val(num);
        })
        $('.line8>.jia').on('click', function () {
            num = $('#math6').val();
            num++
            $('#math6').val(num);
        })
    })
</script>
<script>
    $(function () {
        // 留言板
        $('#btn').on('click', function () {
            let valStr = $('#txt6').find('textarea').val();

            if (valStr.length < 10) {
                alert('评论字数不能低于10个字')
            } else {
                // 每次点击完毕后,清空数据,恢复到初始状态
                let li = $('<li class="current"></li>')
                li.html(valStr)
                $('#info8').append(li)
                let cloneTxt = $('#star').clone(false);
                $('#info8').append(cloneTxt)
                $('#star').find('dt').removeClass('selected')
                $('#star').find('dt').html('☆')
                $('#txt6').find('textarea').val(' ')

                // 提交到数据库
            }
        })
    })
</script>